<template>
  <a-upload
    :action="actionUrl"
    :before-upload="beforeUpload"
    @change="handleChange"
    :remove="handRemove"
    :default-file-list="defaultFileList"
    :accept=" 'video/*'"
  >
    <a-button>
      <a-icon type="upload" />Upload
    </a-button>
  </a-upload>
</template>
<script>
import axios from 'axios'

export default {
  data() {
    return {
      actionUrl: this.$host + '/api/UploadFile',
      loading: false,
      imageUrl: '',
      fileName: '',
      defaultFileList: [],
    }
  },
  props: {
    propFileList: {
      type: Array,
      default: () => [],
    },

    fileType: {
      type: String,
      default: '',
    },
    fileUrl: {
      type: String,
      default: '',
    },
  },
  watch: {
    // fileUrl(val) {
    //   const that = this
    //   console.log('pdf文件 :>> ', val)
    //   const file = val
    //   this.$nextTick(() => {
    //     if (that.fileUrl) {
    //       that.defaultFileList = []
    //       that.defaultFileList.push({
    //         uid: '1',
    //         name: val,
    //         status: 'done',
    //         url: val,
    //       })

    //       that.$forceUpdate()
    //       console.log('this.fileUrl :>> ', this.fileUrl, this.defaultFileList)
    //     }
    //   })
    // },
    defaultFileList(val) {
      // console.log('defaultFileList :>> ', val)
    },
  },
  created() {},
  mounted() {
    const that = this
    const file = this.fileUrl
    if (that.fileUrl) {
      that.defaultFileList.push({
        uid: '1',
        name: file,
        status: 'done',
        url: file, 
      })
      that.$forceUpdate()
      console.log('this.fileUrl :>> ', this.fileUrl, this.defaultFileList)
    }
  },
  methods: {
    handRemove(file) {
      console.log('删除', file)
      if (file.response) {
        this.deleteFile(file.response.data.fileName)
      } else if (file.url) {
        this.deleteFile(file.url)
      }
    },
    // 删除文件
    deleteFile(fileName) {
      const a = {
        method: 'DelFile',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          fullFileName: fileName,
        },
      }
      const url = this.$host + '/api/DelFile'
      axios.post(url, JSON.stringify(a)).then((res) => {
        if (res.data.code === 0) {
          console.log('删除成功')
          this.$message.success('Delete Success!')
        } else {
          console.log('删除失败')
          this.$message.error(res.data.description)
        }
        this.$emit('getFileHttpUrl', '')
      })
    },
    handleChange(info, b, c) {
      console.log('info :>> ', info, b, c)
      this.fileName = info.file.name
      //  pdf 上传只返回 uploading状态
      if (info.file.status === 'uploading') {
        this.loading = true
      }
      if (info.file.status === 'done') {
        this.$emit('getFileHttpUrl', info.file.response.data.fileName)
        console.log('done :>> ', info)
      }
    },
    beforeUpload(file) {
      let that = this
      let isVideo = file.type.indexOf('video') !== -1
      console.log('上传前 :>> ', file)
      console.log('isPdf :>> ', isVideo)
      console.log('file.size  :>> ', file.size / 1024 / 1024)
      return new Promise((resolve, reject) => {
        if (!isVideo) {
          that.$message.warning(
            'The file format is incorrect. Please upload the Video file'
          )
          that.defaultFileList = that.defaultFileList.splice(
            that.defaultFileList.length - 1,
            1
          )
          console.log('this.fileList :>> ', that.defaultFileList)
          reject(false)
        }
        resolve(true)
      })
    },
  },
}
</script>
<style lang="less" scoped>
.avatarImg {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.ant-upload-picture-card-wrapper {
  width: auto !important;
}
.fileName {
  overflow: hidden;
  width: 100px;
}
</style>


